<div class="card">

  <div class="card-header">
    {{pageTitle}}
  </div>

  <div class="card-body"
    *ngIf="products$ |async as products">
    <div class="list-group">
      <button class="list-group-item list-group-item-action rounded-0"
        *ngFor="let product of products"
        [ngClass]="{'active': product?.id === selectedProduct?.id}"
        (click)="productSelected(product)">{{ product.productName }}
        <ng-container *ngIf="displayCode">
          ({{ product.productCode }})
        </ng-container>
      </button>
    </div>
  </div>

  <div class="card-footer">
    <div class="row">
      <div class="form-check col-md-8">
        <label>
          <input class="form-check-input"
            type="checkbox"
            (change)="checkChanged($event.target.checked)"
            [checked]="displayCode"> Display Product Code
        </label>
      </div>
      <div class="col-md-4 text-right">
        <button class="btn btn-primary"
          (click)="newProduct()">
          Add
        </button>
      </div>
    </div>
  </div>
</div>
<div *ngIf="errorMessage$ | async as errorMessage"
  class="alert alert-danger">
  Error: {{ errorMessage }}
</div>
